<template>
  <div class="login_bg">
    <div class="login_adv">
      <div class="login_adv__title">
        <h2>{{ $CONFIG.APP_NAME }}</h2>
        <br>
        <br>
        <h4>商家共赢，客源无忧 / 加入我们，共创辉煌</h4>
        <br>
        <p>让每一次消费都变得简单、快速且安全</p>
      </div>
      <div class="login_adv__mask"></div>
      <div class="login_adv__bottom">Copyright © {{ $CONFIG.COMPANY }}</div>
    </div>
    <div class="login_main">
      <div class="login_config">
        <el-button :icon="isDark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info" @click="configDark"></el-button>
      </div>
      <div class="login-form">
        <div class="login-header">
          <div class="logo">
            <img :alt="$CONFIG.APP_NAME" src="`@/assets/images/logo.png`" />
            <label>{{ $CONFIG.APP_NAME }}</label>
          </div>
        </div>
        <password-form></password-form>
      </div>
    </div>
  </div>
  <el-dialog v-model="showWechatLogin" title="微信扫一扫" :width="400" destroy-on-close>
    <div class="qrCodeLogin">
      <dx-qrcode class="qrCode" :value="wechatLoginCode" :size="300"></dx-qrcode>
      <p class="msg">请使用微信扫一扫登录</p>
      <div class="qrCodeLogin-result" v-if="isWechatLoginResult">
        <el-result icon="success" title="已扫描 | 请在设备中点击授权登录"></el-result>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PasswordForm from './components/PasswordForm.vue'
import { useTheme } from '@/hooks/useTheme'

// 切换暗黑模式
const { isDark, switchDark } = useTheme()
const configDark = () => switchDark()
</script>

<style scoped lang="scss">
@import url('./index.scss');
</style>
